<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0" />
		<title>归档</title>
		<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet">
		<link href="static/css/index.css" rel="stylesheet" />
	</head>

	<body>
		<!--
        	作者：offline
        	时间：2019-09-19
        	描述：导航
        -->
		<!--<nav class="ui inverted attached segment i-padded-tb-mini i-shadow-small">
			<div class="ui container">
				<div class="ui inverted secondary stackable menu">
					<h2 class="ui teal header item">Blog</h2>
					<a href="#" class="i-item item i-mobile-hide"><i class="home mini icon"></i>首页</a>
					<a href="#" class="i-item item i-mobile-hide"><i class="idea mini icon"></i>分类</a>
					<a href="#" class="i-item item i-mobile-hide"><i class="tags mini icon"></i>标签</a>
					<a href="#" class="i-item item i-mobile-hide"><i class="tags mini icon"></i>归档</a>
					<a href="#" class="i-item item i-mobile-hide"><i class="info mini icon"></i>关于我</a>
					<div class="i-item right item i-mobile-hide">
						<div class="ui icon inverted transparent input">
							<input type="text" placeholder="Search...">
							<i class="search link icon"></i>
						</div>
					</div>
				</div>
			</div>
			<a href="#" class="ui menu toggle black button icon i-right-top i-mobile-show">
				<i class="sidebar icon"></i>
			</a>
		</nav>-->
		<div id="head"></div>
		<!--
        	作者：offline
        	时间：2019-09-19
        	描述：内容
        -->
		 <!--中间内容-->
  <div  class="i-container-small i-padded-tb-big" >
    <div class="ui container">
      <!--header-->
      <div class="ui top attached padded segment" id="archivesHead">
        <div class="ui middle aligned two column grid">
          <div class="column">
            <h3 class="ui teal header">归档</h3>
          </div>
          <div class="right aligned column">
                    共 <h2 class="ui orange header i-inline-block i-text-thin" id="blogsCount">  </h2> 篇博客
          </div>
        </div>
      </div>
  	</div>
  </div>
		<!--
        	作者：offline
        	时间：2019-09-19
        	描述：footer
        -->
		<div id="foot"></div>

	</body>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
	<script src="static/js/function.js"></script>
	<script>
		$('.menu.toggle').click(function() {
			$('.i-item').toggleClass('i-mobile-hide');
		});

		$(".qq").popup();

		$(".wechat").popup({
			popup: $(".wechat_qr"),
			position: "bottom center"
		})
		$(function(){
			$('#head').load('common/head.html',null,function(){
				$('.navbarlist a').removeClass('active');
				$('.navbarlist a:eq(3)').addClass('active');
			});
			$('#foot').load('common/foot.html');
			archivesInit();
		})
		
		
		function archivesInit(){
			$.ajax({
				url:urlPath+"/index/api/getArchivesData",
				type:"get",
				success:function(res){
					if(res.code == 200){
						$('#blogsCount').text(res.data.total);
						var archivesHead = $('#archivesHead');
						var archivesHtml = "";
						var archivesData = res.data.data;
						for(var i=0;i<archivesData.length;i++){
							archivesHtml+='<h3 class="ui center aligned header i-margin-top-small">'+archivesData[i].year+
										'</h3>';
							
							archivesHtml+='<div class="ui fluid vertical menu">';
							for(var j=0;j<archivesData[i].detail.length;j++){
								var flag = archivesData[i].detail[j].flag;
								switch(flag){
									case '0':
									   flag='原创';
									   break;
									case '1':
										flag='转载';
										break;
									case '2':
										flag='翻译';
										break;
								}
								archivesHtml+='<a href="#" target="_blank" class="item">'+
													'<span><i class="mini teal circle icon"></i><span onclick=toBlogDetail("'+archivesData[i].detail[j].id+'")>'+archivesData[i].detail[j].title+'</span>'+
														'<div class="ui teal basic left pointing label i-padded-mini">'+archivesData[i].detail[j].calendar+'</div>'+
													'</span>'+
													'<div class="ui orange basic left pointing label i-padded-mini">'+flag+'</div>'+
												'</a>';
							}
							archivesHtml+='</div>';	
						}
						archivesHead.after(archivesHtml);
					}
				}
			})
			
			
		}
	</script>

</html>